<template>
	<view class="content">
		<!-- 会员卡片 -->
		<view class="membership-card">
			<view class="membership-level">黄金会员</view>
			<view class="membership-expiry">有效期至：2024-12-31</view>

			<view class="membership-benefits">
				<view class="membership-benefit-item">
					<uni-icons type="checkcircle" color="var(--primary-color)" size="16"></uni-icons>
					<text>会员专享9.5折</text>
				</view>
				<view class="membership-benefit-item">
					<uni-icons type="checkcircle" color="var(--primary-color)" size="16"></uni-icons>
					<text>生日礼包</text>
				</view>
				<view class="membership-benefit-item">
					<uni-icons type="checkcircle" color="var(--primary-color)" size="16"></uni-icons>
					<text>专属客服</text>
				</view>
			</view>
		</view>

		<!-- 会员权益 -->
		<view class="card">
			<view style="font-size: 16px; font-weight: bold; margin-bottom: 15px;">会员权益</view>

			<view class="benefits-grid">
				<view class="benefit-item" v-for="(item, index) in benefits" :key="index">
					<view class="benefit-icon">
						<uni-icons :type="item.icon" :color="item.color" size="20"></uni-icons>
					</view>
					<view class="benefit-name">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<!-- 会员等级 -->
		<view class="card">
			<view style="font-size: 16px; font-weight: bold; margin-bottom: 15px;">会员等级</view>

			<scroll-view scroll-x class="level-scroll" show-scrollbar="false">
				<view class="level-progress">
					<!-- 等级进度条背景 -->
					<view class="progress-bg"></view>

					<!-- 等级进度条 -->
					<view class="progress-active" :style="{width: progressWidth}"></view>

					<!-- 等级节点和信息 -->
					<view class="level-nodes">
						<view class="level-node" v-for="(level, index) in levels" :key="index">
							<view class="progress-dot" :class="{active: index <= currentLevel}"></view>
							<view class="level-name" :class="{active: index === currentLevel}">
								{{ level.name }}
							</view>
							<view class="level-discount" :class="{active: index === currentLevel}">
								{{ level.discount }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="level-info">
				<view>当前成长值：<text class="highlight">{{ currentPoints }}</text></view>
				<view>距离钻石会员：<text class="highlight">{{ remainingPoints }}</text></view>
			</view>

			<view class="level-tip">
				<uni-icons type="info" size="12" color="#999"></uni-icons>
				<text>每消费1元累计1点成长值，成长值永久有效</text>
			</view>
		</view>

		<!-- 会员升级 -->
		<view class="membership-upgrade">
			<view class="membership-upgrade-title">会员升级</view>

			<view class="membership-plans">
				<view class="membership-plan" v-for="(plan, index) in plans" :key="index"
					:class="{active: index === selectedPlan}" @click="selectPlan(index)">
					<view class="membership-plan-duration">{{ plan.duration }}</view>
					<view class="membership-plan-price">{{ plan.price }}</view>
					<view class="membership-plan-original">{{ plan.original }}</view>
				</view>
			</view>

			<button class="upgrade-btn" @click="upgradeMembership">立即开通</button>
		</view>

		<!-- 会员专享商品 -->
		<view class="exclusive-title">会员专享商品</view>

		<view class="product-grid">
			<view class="product-card" v-for="(product, index) in products" :key="index">
				<image :src="product.image" mode="aspectFill"></image>
				<view class="product-info">
					<view class="product-title">{{ product.name }}</view>
					<view class="product-price">
						{{ product.price }} <text class="original">{{ product.originalPrice }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

	// 会员权益数据
	const benefits = ref([{
			icon: 'medal',
			name: '专享折扣',
			color: 'var(--primary-color)'
		},
		{
			icon: 'gift',
			name: '生日礼包',
			color: 'var(--primary-color)'
		},
		{
			icon: 'headphones',
			name: '专属客服',
			color: 'var(--primary-color)'
		},
		{
			icon: 'paperplane',
			name: '免邮特权',
			color: 'var(--primary-color)'
		},
		{
			icon: 'fire',
			name: '优先购买',
			color: 'var(--primary-color)'
		},
		{
			icon: 'percent',
			name: '积分加倍',
			color: 'var(--primary-color)'
		},
		{
			icon: 'ticket',
			name: '专属券包',
			color: 'var(--primary-color)'
		},
		{
			icon: 'star',
			name: '更多特权',
			color: 'var(--primary-color)'
		}
	]);

	// 会员等级数据
	const levels = ref([{
			name: '普通会员',
			discount: '9.8折'
		},
		{
			name: '银卡会员',
			discount: '9.6折'
		},
		{
			name: '黄金会员',
			discount: '9.5折'
		},
		{
			name: '钻石会员',
			discount: '9折'
		}
	]);
	const currentLevel = ref(2); // 当前等级索引
	const currentPoints = ref(3200); // 当前成长值
	const remainingPoints = ref(1800); // 剩余成长值
	const progressWidth = ref('60%'); // 进度条宽度

	// 会员升级计划
	const plans = ref([{
			duration: '月卡',
			price: '¥19.9',
			original: '¥29.9'
		},
		{
			duration: '季卡',
			price: '¥49.9',
			original: '¥89.9'
		},
		{
			duration: '年卡',
			price: '¥169.9',
			original: '¥299.9'
		}
	]);
	const selectedPlan = ref(1); // 默认选中季卡

	// 会员专享商品
	const products = ref([{
			name: '便携式蓝牙音箱',
			price: '¥49.9',
			originalPrice: '¥99.9',
			image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
		},
		{
			name: '时尚太阳镜',
			price: '¥39.9',
			originalPrice: '¥89.9',
			image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80'
		}
	]);

	// 选择会员计划
	const selectPlan = (index) => {
		selectedPlan.value = index;
	};

	// 升级会员
	const upgradeMembership = () => {
		uni.showModal({
			title: '确认开通',
			content: `确定要开通${plans.value[selectedPlan.value].duration}会员吗？`,
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '开通成功',
						icon: 'success'
					});
				}
			}
		});
	};
</script>

<style lang="scss">
	.content {
		padding: 15px;
	}

	.membership-card {
		background: linear-gradient(135deg, var(--primary-color), #ff9a9e);
		border-radius: 8px;
		padding: 20px;
		color: white;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(255, 106, 106, 0.2);
		position: relative;
		overflow: hidden;
	}

	.membership-card:before {
		content: '';
		position: absolute;
		top: -20px;
		right: -20px;
		width: 120px;
		height: 120px;
		border-radius: 60px;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.membership-level {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.membership-expiry {
		font-size: 12px;
		opacity: 0.9;
		margin-bottom: 15px;
	}

	.membership-benefits {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.membership-benefit-item {
		display: flex;
		align-items: center;
		font-size: 12px;
		margin-right: 10px;
	}

	.card {
		background-color: white;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.benefits-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		text-align: center;
	}

	.benefit-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.benefit-icon {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background-color: rgba(255, 106, 106, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8px;
	}

	.benefit-name {
		font-size: 12px;
	}

	.level-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.level-progress {
		position: relative;
		height: 80px;
		margin-bottom: 20px;
		padding: 0 20px;
		width: max-content;
		min-width: 100%;
	}

	.progress-bg {
		position: absolute;
		top: 40px;
		left: 20px;
		right: 20px;
		height: 4px;
		background-color: #eee;
		border-radius: 2px;
	}

	.progress-active {
		position: absolute;
		top: 40px;
		left: 20px;
		height: 4px;
		background-color: var(--primary-color);
		border-radius: 2px;
		transition: width 0.3s ease;
	}

	.level-nodes {
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 20px;
		right: 20px;
		height: 100%;
	}

	.level-node {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 80px;
	}

	.progress-dot {
		width: 12px;
		height: 12px;
		background-color: #eee;
		border-radius: 50%;
		margin-top: 34px;
	}

	.progress-dot.active {
		background-color: var(--primary-color);
	}

	.level-name {
		font-size: 12px;
		text-align: center;
		margin-bottom: auto;
		white-space: nowrap;
	}

	.level-name.active {
		color: var(--primary-color);
		font-weight: bold;
	}

	.level-discount {
		font-size: 10px;
		color: #999;
		text-align: center;
		margin-top: auto;
		white-space: nowrap;
	}

	.level-discount.active {
		color: var(--primary-color);
	}

	.level-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		font-size: 14px;
	}

	.highlight {
		color: var(--primary-color);
		font-weight: bold;
	}

	.level-tip {
		font-size: 12px;
		color: #999;
		display: flex;
		align-items: center;
	}

	.membership-upgrade {
		background-color: white;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.membership-upgrade-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.membership-plans {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.membership-plan {
		flex: 1;
		text-align: center;
		padding: 10px;
		border: 1px solid #eee;
		border-radius: 8px;
		margin: 0 5px;
	}

	.membership-plan.active {
		border-color: var(--primary-color);
		background-color: rgba(255, 106, 106, 0.05);
	}

	.membership-plan-duration {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.membership-plan-price {
		font-size: 16px;
		font-weight: bold;
		color: var(--primary-color);
		margin-bottom: 5px;
	}

	.membership-plan-original {
		font-size: 12px;
		color: #999;
		text-decoration: line-through;
	}

	.upgrade-btn {
		background-color: var(--primary-color);
		color: white;
		border: none;
		border-radius: 20px;
		padding: 10px;
		font-size: 14px;
		width: 100%;
	}

	.exclusive-title {
		font-size: 16px;
		font-weight: bold;
		margin: 15px 0 10px;
		padding: 0 15px;
	}

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 0 10px;
	}

	.product-card {
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.product-card image {
		width: 100%;
		height: 150px;
		object-fit: cover;
	}

	.product-info {
		padding: 10px;
	}

	.product-title {
		font-size: 14px;
		margin-bottom: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.product-price {
		font-size: 15px;
		font-weight: bold;
		color: var(--primary-color);
	}

	.original {
		font-size: 12px;
		color: #999;
		text-decoration: line-through;
		margin-left: 5px;
	}
</style>